<template>
    <div :id="dialogId" class="el-dialog custom-drag-dialog" ref="main" :style="{'width':width}">
        <div class="custom-drag-dialog-wrapper" >
            <div class="custom-drag-body">
                <div class="el-dialog__header">
                    <slot  name="header" :data="result"></slot>
                </div>
                <div class="el-dialog__body">
                    <slot :data="result"></slot>
                </div>
                <div class="el-dialog__footer">
                    <slot  name="footer" :data="result"></slot>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
  name: 'index',
  components: {  },
  data() {
    return {
      dialogId: '',
      excludes: ['TEXTAREA', 'INPUT', 'BUTTON', 'SELECT'],
      body: this.appendToBody,
      des: this.destroy,
      result: this.item,
      startPosition: {
        x: 0, y: 0
      },
      dialogPosition: {
        x: 0, y: 0
      },
      dragging: false,
    }
  },
  props: {
    width: {
      type: String,
      default: '50%'
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    destroy: false,
    appendToBody: true,
  },
  watch: {
    item: {
      handler(val, o) {
        if (val) {
          this.result = val;
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    wrapperLayout() {
      this.$nextTick(() => {
        let rect =  this.$el.getBoundingClientRect();
        this.$el.style.left=(parseInt(rect.left, 10) || 0)+'px';
        this.$el.style.top=(parseInt(rect.top, 10) || 0)+'px';
        this.$el.style.transform='none';
      })
    },
    getMaxZIndex() {
      let maxZindex=0;
      let eles = document.querySelectorAll('*');
      for (let i = 0; i < eles.length; i++) {
        if (eles[i].style.zIndex) {
          maxZindex = Math.max(maxZindex,  eles[i].style.zIndex|| 0);
        }
      }
      return maxZindex;
    },
    close() {
      this.$el.style.visibility='hidden';
      this.$el.style.opacity='0';
      this.$el.style.zIndex='-1';
      this.$el.style.display='none';
      this.$el.style.left='';
      this.$el.style.top='';
      this.$el.style.transform='';
      this.$emit('close');
      this.result={};
      this.dialogVisible = false;
      if (this.des) {
        if (this.body) {
          document.body.removeChild(this.$el);
        } else {
          this.$parent.$el.removeChild(this.$el);
        }
      }
    },
    show(data, point) {
      this.$el.style.visibility='visible';
      this.$el.style.opacity='1';
      this.$el.style.zIndex=this.getMaxZIndex()+1;
      this.$el.style.display='block';
      this.result = data;
      this.dialogVisible = true;
      if (this.des) {
        if (this.body) {
          document.body.appendChild(this.$el);
        } else {
          this.$parent.$el.appendChild(this.$el);
        }
      }
      this.wrapperLayout();
    },
    backClose() {
      this.$el.style.visibility='hidden';
      this.$el.style.opacity='0';
      this.$el.style.zIndex='-1';
      this.$el.style.display='none';
      this.$el.style.left='';
      this.$el.style.top='';
      this.$el.style.transform='';
      this.$emit('close');
      this.result={};
      this.dialogVisible = false;
    },
    excludeDom(dom) {
      return this.excludes.indexOf(dom.nodeName.toUpperCase());
    },
    bind(el) {
      el.handleWindowMouseUp =function(e) {
        if (e.clientY > window.innerWidth || e.clientY<0 || e.clientX<0 ||e.clientX>window.innerHeight) {
          // 在这加入你想执行的代码，此条件下鼠标已经在浏览器外
          el.removeEventListener('mousemove', el. handleMouseMove);
          el.removeEventListener('mouseup', handleMouseUp);
        }
      }
      el.handleMouseMove = (e) => {
        if (this.dragging) {
          const x = this.dialogPosition.x+e.clientX - this.startPosition.x;
          const y = this.dialogPosition.y+e.clientY - this.startPosition.y;
          this.$el.style.left = `${x}px`;
          this.$el.style.top = `${y}px`;
          this.$el.style.transform= 'none';
        }
      };
      el.handleMouseDown = (e) => {
        console.info('handleMouseDown');

        el.style.zIndex=this.getMaxZIndex()+1;
        console.info(this.getMaxZIndex())
        if (this.excludeDom(e.target)===-1) {

          // e.stopPropagation();
          // e.preventDefault();
          this.startPosition.x = e.clientX;
          this.startPosition.y = e.clientY;
          let rect =  el.getBoundingClientRect();
          this.dialogPosition.x = parseInt(rect.left, 10) || 0;
          this.dialogPosition.y = parseInt(rect.top, 10) || 0;

          document.addEventListener('mousemove', el.handleMouseMove);
          document.addEventListener('mouseup', handleMouseUp);

          this.dragging = true;
        }
      };
      const handleMouseUp = () => {
        document.removeEventListener('mousemove', el.handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);

        this.dragging = false;
      };

      el.addEventListener('mousedown', el.handleMouseDown);
      document.addEventListener('mouseup', el.handleWindowMouseUp);
    },
    unbind(el) {
      el.removeEventListener('mousedown', el.handleMouseDown);
      document.removeEventListener('mouseup', el.handleWindowMouseUp);
    }
  },
  mounted() {

  },
  destroyed() {
    this.unbind(this.$el);
  },
  created() {
    this.$nextTick(() => {
      this.dialogId='_'+Math.round(Math.random()*999999999)+new Date().getTime();
      this.bind(this.$el);
      if (this.body) {
        document.body.appendChild(this.$el);
      } else {
        this.$parent.$el.appendChild(this.$el);
      }
    })
  }
}
</script>

<style scoped lang="less">
    .custom-drag-dialog{
        position: fixed;
        /*pointer-events:none;*/
        z-index: 3000;
        /*transition: 0.3s;*/
        visibility: hidden;
        opacity: 0;
        display: none;
        margin:0;
        transform: translate(-50%, -50%);
        left: 50%;
        top:50%;
        .custom-drag-dialog-wrapper{
            position: relative;
            width: 100%;
            height: 100%;
            .custom-drag-body{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
